<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="copyright" content="首页">
<meta name="author" content="首页">
<title>首页</title>
<link rel="stylesheet" href="./static/css/basic.css" />
<link rel="stylesheet" href="./static/css/style.css" />
<link rel="stylesheet" href="static/swiper/swiper.min.css" />
<link rel="stylesheet" href="./static/fonticon/iconfont.css">
<script src="./static/js/jquery-1.11.0.min.js"></script>
<script src="./static/js/js.js"></script>
<script src="static/swiper/swiper.min.js"></script>
</head>

<body>
  <header id="header">
    <div class="box nav flex-bect">
      <a href="" class="logo"><img src="static/images/logo.png" alt=""></a>
      <div class="flex-1"></div>
      <a href="index.html" class="nava on"><span class="iconfont icon-shouye"></span>首页</a>
      <a href="about.html" class="nava"><span class="iconfont icon-qiyejieshao"></span>企业介绍</a>
      <a href="news.html" class="nava"><span class="iconfont icon-xinwenzhongxin"></span>新闻中心</a>
      <a href="tel:0551-6543210" class="phone"><span class="iconfont icon-dianhua"></span>0551-6543210</a>
    </div>
  </header>
  <div class="banner">
    <div class="swiper-container swiper">
      <ul class="swiper-wrapper">
        <li class="swiper-slide">
          <a class="a"><div class="imgW"><img src="./static/images/banner.png" alt="" class="img"></div></a>
        </li>
        <li class="swiper-slide">
          <a class="a"><div class="imgW"><img src="static/images/banner.png" alt="" class="img"></div></a>
        </li>
      </ul>
    </div>
    <div class="dots dots1"></div>
  </div>
  <div class="main main1">
    <div class="box flex-bect">
      <div class="m1-le m-w">
        <div class="m-tit">
          <h1>企业介绍</h1>
          <h2>Company Introduction</h2>
        </div>
        <div class="m1-con">
          <div class="m1-t">乐尔康大药房</div>
          <div class="intro">第二十一届中国零售药店年度大会暨第六届中国专业药房发展论坛在山西太原盛大召开，大会发布“2024年度中国药品零售企业销售总额十强”榜单，老百姓大药房位列第四。旗下更有多家门店在专业服务领域大放异彩：11家门店荣膺2024-2025年药品零售企业“最佳健康驿站药店”称号、11家门店荣获“优秀健康驿站药店”称号，7家门店分别被授予“银屑病标准”示范店和“甲状腺标准”示范店</div>
        </div>
      </div>
      <div class="m1-ri m-w">
        <img src="static/images/m1-1.png" class="bk" alt="" />
      </div>
    </div>
  </div>
  
  <div class="main main2">
    <div class="box m2-ban">
      <div class="m-tit">
        <h1>资质荣誉</h1>
        <h2>Qualification and Honor</h2>
      </div>
      
      <div class="m2-box">
        <div class="swiper-container swiper">
          <ul class="swiper-wrapper">
            <li class="swiper-slide">
              <div class="imgW"><img src="./static/images/m2-1.png" alt="" class="img"></div>
            </li>
            <li class="swiper-slide">
              <div class="imgW"><img src="static/images/m2-1.png" alt="" class="img"></div>
            </li>
            <li class="swiper-slide">
              <div class="imgW"><img src="./static/images/m2-1.png" alt="" class="img"></div>
            </li>
            <li class="swiper-slide">
              <div class="imgW"><img src="static/images/m2-1.png" alt="" class="img"></div>
            </li>
            <li class="swiper-slide">
              <div class="imgW"><img src="./static/images/m2-1.png" alt="" class="img"></div>
            </li>
            <li class="swiper-slide">
              <div class="imgW"><img src="static/images/m2-1.png" alt="" class="img"></div>
            </li>
            <li class="swiper-slide">
              <div class="imgW"><img src="./static/images/m2-1.png" alt="" class="img"></div>
            </li>
            <li class="swiper-slide">
              <div class="imgW"><img src="static/images/m2-1.png" alt="" class="img"></div>
            </li>
            <li class="swiper-slide">
              <div class="imgW"><img src="./static/images/m2-1.png" alt="" class="img"></div>
            </li>
            <li class="swiper-slide">
              <div class="imgW"><img src="static/images/m2-1.png" alt="" class="img"></div>
            </li>
            <li class="swiper-slide">
              <div class="imgW"><img src="./static/images/m2-1.png" alt="" class="img"></div>
            </li>
            <li class="swiper-slide">
              <div class="imgW"><img src="static/images/m2-1.png" alt="" class="img"></div>
            </li>
            <li class="swiper-slide">
              <div class="imgW"><img src="./static/images/m2-1.png" alt="" class="img"></div>
            </li>
            <li class="swiper-slide">
              <div class="imgW"><img src="static/images/m2-1.png" alt="" class="img"></div>
            </li>
            <li class="swiper-slide">
              <div class="imgW"><img src="./static/images/m2-1.png" alt="" class="img"></div>
            </li>
            <li class="swiper-slide">
              <div class="imgW"><img src="static/images/m2-1.png" alt="" class="img"></div>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="dots dots1"></div>
    </div>
  </div>
  
  <div class="main main3">
    <div class="box">
      <div class="m-tit tc">
        <h1>新闻中心</h1>
        <h2>News Center</h2>
      </div>
      
      <div class="flex-bect wrap">
        <div class="m3-le m-w">
          <div class="swiper-container swiper">
            <ul class="swiper-wrapper">
              <li class="swiper-slide">
                <a class="a">
                  <div class="imgW"><img src="./static/images/news.jpg" alt="" class="img"></div>
                  <div class="name f20"><div class="row1 ">保健食品的多样应用场景让健康更简单</div></div>
                </a>
              </li>
              <li class="swiper-slide">
                <a class="a">
                  <div class="imgW"><img src="./static/images/news.jpg" alt="" class="img"></div>
                  <div class="name f20"><div class="row1">保健食品的多样应用场景让健康更简单</div></div>
                </a>
              </li>
            </ul>
          </div>
          <div class="dots dots1"></div>
        </div>
        <div class="m3-ri m-w">
          <a href="detail.html" class="news-item">
            <div class="div">
              <div class="name row1 f20">医疗器械行业新动态：技术革新与市场趋势</div>
              <div class="intro row1 color-999">探索医疗器械行业的新动态、技术进步以及市场趋势，助力健康未来</div>
            </div>
            <div class="time">
              <b>08</b>
              <p>2025/07</p>
            </div>
          </a>
          <a href="detail.html" class="news-item">
            <div class="div">
              <div class="name row1 f20">医疗器械行业新动态：技术革新与市场趋势</div>
              <div class="intro row1 color-999">探索医疗器械行业的新动态、技术进步以及市场趋势，助力健康未来</div>
            </div>
            <div class="time">
              <b>08</b>
              <p>2025/07</p>
            </div>
          </a>
          <a href="detail.html" class="news-item">
            <div class="div">
              <div class="name row1 f20">医疗器械行业新动态：技术革新与市场趋势</div>
              <div class="intro row1 color-999">探索医疗器械行业的新动态、技术进步以及市场趋势，助力健康未来</div>
            </div>
            <div class="time">
              <b>08</b>
              <p>2025/07</p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
  
<footer id="footer" class="footer-module">
  <div class="footer-fast">
    <div class="box">
      <div class="m-tit tc">
        <h1>联系我们</h1>
        <h2>Contact Us</h2>
      </div>
      <div class="contect-list">
        <div class="item">
          <div class="iconfont icon-dianhua"></div>
          <div class="bt">电话</div>
          <div class="value">0000-000000</div>
        </div>
        <div class="item">
          <div class="iconfont icon-youxiang"></div>
          <div class="bt">邮箱</div>
          <div class="value">11122@qq.com</div>
        </div>
        <div class="item">
          <div class="iconfont icon-dizhi"></div>
          <div class="bt">地址</div>
          <div class="value">乐尔康大药房乐尔康大药房</div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer-menu">
    <div class="left"> </div>
    <div class="right"></div>
  </div>
</footer>
<style>

</style>

  <script>
    $(document).ready(function () {
      new Swiper('.banner .swiper-container', {
        loop: true,
        pagination: {
          el: '.banner .dots',
        },
      });
      
      new Swiper('.m2-ban .swiper', {
        effect: 'coverflow',
        autoplay: { delay: 50000 },
        spaceBetween: -120,
        slidesPerView: 5,
        grabCursor: true,
        centeredSlides: true,
        loopedSlides: 10,
        loop: true,
        coverflowEffect: {
          rotate: 20,
          stretch: 0,
          depth: 180,
          modifier: 1,
          slideShadows : true,
        },
        pagination: {
          el: '.m2-ban .dots',
          clickable: true,
          bulletActiveClass: 'active'
        },
        navigation: {
          nextEl: '.m2-ban .next',
          prevEl: '.m2-ban .prev'
        },
        breakpoints: {
          998: {
            slidesPerView: 3,
            effect: 'fadeIn',
            spaceBetween: 10,
          },
          580: {
            slidesPerView: 2,
            effect: 'fadeIn',
            spaceBetween: 10,
          },
        },
        // 初始化时设置类名
        on: {
          init: function(swiper) {
            a()
          },
          slideChange: function(swiper) {
             a()
          },
          slideChangeTransitionEnd:function(){
            a()
          }
        }
        
      });
      function a(){
        $('.m2-ban .swiper-slide').removeClass('prev')
        $('.m2-ban .swiper-slide-active').addClass('prev')


        $('.m2-ban .swiper-slide-active').prev().addClass('prev')
        $('.m2-ban .swiper-slide-active').prev().prev().addClass('prev')
        $('.m2-ban .swiper-slide-active').prev().prev().prev().addClass('prev')


        $('.m2-ban .swiper-slide-active').next().addClass('prev')
        $('.m2-ban .swiper-slide-active').next().next().addClass('prev')
        $('.m2-ban .swiper-slide-active').next().next().next().addClass('prev')
      }
      
      new Swiper('.m7-banner .swiper-container', {
        loop: true,
        slidesPerView: 3,
        spaceBetween: 25,
        resistanceRatio: 0,
        autoplay: {
          delay: 0, // 立即切换，无延迟
          disableOnInteraction: false,
        },
        speed: 5000, // 滚动一圈的时间（毫秒），控制“匀速”
        freeMode: false, // 关闭自由滑动，确保匀速
        allowTouchMove: false, // 禁止触摸拖动，保持自动滚动
        breakpoints:{
          768: {
            freemode: true,
            slidesPerView: 2,
            spaceBetween: 15,
          },
          280 : {
            freemode: true,
            slidesPerView: 1,
            spaceBetween: 10,
          }
        },
      });
      new Swiper('.m1-banner .swiper-container', {
        loop: true,
        slidesPerView: 3,
        spaceBetween: 25,
        resistanceRatio: 0,
        autoplay: {
          delay: 0, // 立即切换，无延迟
          disableOnInteraction: false,
        },
        speed: 5000, // 滚动一圈的时间（毫秒），控制“匀速”
        freeMode: false, // 关闭自由滑动，确保匀速
        allowTouchMove: false, // 禁止触摸拖动，保持自动滚动
        breakpoints:{
          768: {
            freemode: true,
            slidesPerView: 2,
            spaceBetween: 15,
          },
          280 : {
            freemode: true,
            slidesPerView: 1,
            spaceBetween: 10,
          }
        },
      });
      
    });
  </script>
</body>
</html>